<template>
  <div class="header">
    <div class="left">
      <img src="../assets/img/logo.png" alt="" />
      <i
        class="iconfont"
        @click="TOGGLE_SIDEBAR"
        :class="!sidebar ? 'icon-foldLeft' : 'icon-foldRight'"
      >
      </i>
    </div>

    <div class="right">
      <div class="right-ming">
        <span>{{username}}({{type == 1?"超级管理员":"普通管理员"}})</span>
        <img src="../assets/img/gita.gif" alt="" />
        <p>|</p>
        <a @click="LogoutAction" class="denglu"> 退出登录 </a>
      </div>
      <img src="../assets/img/cn.png" alt="" class="img-cn" />
    </div>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'MyHeader',
  methods: {
    ...mapMutations(['TOGGLE_SIDEBAR']),
    ...mapActions(['LogoutAction'])
  },
  computed: {
    ...mapGetters(['sidebar', 'username', 'type'])
  }
}
</script>

<style scoped lang="less">
.header {
  height: 50px;
  width: 100%;
  background-color: lightblue;
  line-height: 50px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .left {
  position: relative;
  width: 150px;
  img {
    width: 100px;
    margin-left: 10px;
    margin-top: 20px;
  }
  i{
    position: absolute;
    top:12px;
    right:5px;
  }
}

.header .right {
  height: 50px;
  width: 321px;
  display: flex;
}
.header .right .right-ming {
  height: 50px;
  width: 330px;
  display: flex;
  justify-content: center;
  font-size: 15px;
  span{
    display: inline-block;
  }
}
.header .right .right-ming img {
  height: 30px;
  width: 30px;
  margin: 10px 3px;
}
.header .right .right-ming p {
  margin: 0 8px;
}
.header .right .right-ming .denglu{
  cursor: pointer;
  color: blue;
  width: 66px;
  text-decoration: underline;

}
.header .right .img-cn {
  width: 50px;
  height: 50px;
}
</style>
